マテリアルチップボタンのセマンティクス

コンテンツ

まとめ

Flutter は、次のセマンティックラベルを適用するようになりました。buttonにすべてインタラクティブマテリアルチップアクセシビリティの目的のため。

コンテクスト

インタラクティブマテリアルチップ (つまり、ActionChip、ChoiceChip、FilterChip、とInputChip) 意味的にボタンとしてマークされるようになりました。ただし、非インタラクティブな情報は、Chipではありません。

チップをボタンとしてマークすると、アクセシビリティツールに役立ちます。検索エンジン、その他の意味解析ソフトウェアアプリの意味を理解する。たとえば、それはスクリーンリーダー (Android の TalkBack など) を許可します iOS では VoiceOver) を使用して、タップ可能なチップをアナウンスします。ユーザーのナビゲーションを支援する「ボタン」としてあなたのアプリ。この変更が行われる前は、アクセシビリティのユーザーはツールのエクスペリエンスが標準以下だった可能性があります。手動で追加して回避策を実装していない限り、 Chip ウィジェットにセマンティクスが欠落しているあなたのアプリで。

変更内容の説明

一番外側Semanticsすべてをラップするウィジェットセマンティックプロパティを記述するチップクラス変更されます。

次の変更が適用されますActionChip、ChoiceChip、FilterChip、とInputChip:

のbutton財産に設定されていますtrue。
のenabled財産チップが現在タップ可能 (コールバックを設定することによって)。

これらのプロパティの変更により、インタラクティブなチップのセマンティクスがもたらされます。他人の行動に合わせた行動素材ボタン。

非インタラクティブな情報については、ベッド13d8b-0444-47f4-9b27-7c9a5224ad9c:

のbutton財産に設定されていますfalse。
のenabled財産に設定されていますnull。

移行ガイド

移行を実行する必要がない場合もあります。この変更は、回避策を講じた場合にのみ影響します。マテリアルチップ欠落問題buttonによるセマンティクスに与えられたウィジェットをラッピングするlabelのフィールドChipとともにSemanticsとしてマークされたウィジェットbutton: true。この場合、内側と外側は、buttonセマンティクスの競合により、タップ可能な領域が発生しますラベルのサイズまで縮小するボタンこの変更が導入された後。この問題を修正してくださいそれを削除するか、Semanticsウィジェットと置換子と一緒に、または削除することで、button: true他のセマンティックプロパティがまだある場合はプロパティに適用する必要がありますlabelチップのウィジェット。

次のスニペットでは、InputChip例として、しかし、同じプロセスが適用されますActionChip、ChoiceChip、とFilterChip同じように。

ケース 1:Semanticsウィジェット。

移行前のコード:

Widget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    button: true,
    child: Text('My Input Chip'),
  ),
);

移行後のコード:

Widget myInputChip = InputChip(
  onPressed: () {},
  label: Text('My Input Chip'),
);

ケース 2: 削除するbutton:trueからSemanticsウィジェット。

移行前のコード:

Widget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    button: true,
    hint: 'Example Hint',
    child: Text('My Input Chip'),
  ),
);

移行後のコード:

Widget myInputChip = InputChip(
  onPressed: () {},
  label: Semantics(
    hint: 'Example Hint',
    child: Text('My Input Chip'),
  ),
);

タイムライン

リリースされたバージョン: 1.23.0-7.0.pre
安定版リリース: 2.0.0

参考文献

API ドキュメント:

ActionChip
Chip
ChoiceChip
FilterChip
InputChip
素材ボタン
マテリアルチップ
Semantics
SemanticsProperties.button
SemanticsProperties.enabled